$(function () {
	Bussiness = 1;
	if (localStorage.getItem('permission')) {
		initBussinessData();
	} else {
		localStorage.clear()
		window.location = 'login.html'
	}

});

//界面数据初始化
function initBussinessData() {
	const currYear = localStorage.getItem("year");
	const currMon = localStorage.getItem("month");
	const currDept = localStorage.getItem("dept");
	//请求参数
	var obj = {
		budgetYear: currYear,
		budgetMonth: currMon,
		dept: currDept,
		status: 2,
		chartPage: "50101",
	};
	//API
	ApiGet("getdata", obj, function (e) {
		var json = JSON.parse(e);
		var chartData = json.items[0].charts;
		//1
		console.log(
			chartData[0].data[0],
			"1-支出预算执行率；2-预算执行金额；3-剩余金额；4-预算总额；5-横向计划完成率；6-横向计划完成数；7-横向计划总数；8-纵向计划完成率；9-纵向计划完成数；10-纵向计划总数；"
		);
		//2
		console.log(
			chartData[1].data,
			"{1-月；2-横向计划完成率；3-纵向计划完成率；4-预算完成率}"
		);
		//3
		console.log(
			chartData[2].data,
			"{1-预算号；2-预算名称；3-预算总额；4-执行金额；5-剩余金额；6-执行率；7-占比}"
		);
		//4
		console.log(chartData, "chartData");
		let permi = JSON.parse(localStorage.getItem('permission'));
		if (permi.key04 == '1') {
			$('.wrapper>.left').html(`<div class="box panel-cost">
		                <h3>
		                    <span class="title">支出</span>
		                    <a href="businessexpense.html" title="查看支出详情"><span
		                            class="icon iconfont icon-arrow-right"></span></a>
		                </h3>
		                <div class="costinfo">
		                </div>
		            </div>
		            <div class="box business-unit">
		               
		                <div id="wrapper" style="position: relative; width: 100%; height: 100%;">
		                    <h3 style="height: 8%;">支出概览</h3>
		                    
		                    <div id="myDiagramDiv1"></div>
		                  
		                    <span id="myCanvases"
		                        style="position:absolute; top:0px; left:0px; width:0px; height:0px; opacity:0"></span>
		                    
		                    <span id="myCanvases-process"
		                        style="position:absolute; top:0px; left:0px; width:0px; height:0px; opacity:0">
		                        <p id="pro">条形图</p>
		                    </span>
		                    <div style="position: absolute;top: 0px;right: 20px; display: flex;">
		                        <p>

		                            <div onclick="zoomIn()" class="zoom">
		                                <img src="assets/images/index/icon_Zoom In.png" alt="放大"></div>
		                        </p>
		                    </div>
		                    <div class="tabs" style="position: absolute;top: 0;left: 100px;">
		                        <button id="one" class="butt" xh="1" >业务板块</button>
		                        <button style="display:none;" id="two" class="butt" xh="2" >部门维度</button>
		                    </div>
												<div id="nodata"></div>
		                </div>
		            </div>`)
			setZhichuPanelData(chartData[0].data[0])
			yewuTreeData(xh); //获取数据

		}
		if (permi.key05 == '1') {
			$('.wrapper>.right').html(`<div style="height:530px;" class="box panel-cost panel-plan">
                        <h3>
                            <span class="title">计划</span>
                        </h3>
                        <div id="heng">横向</div>
                        <div class="costinfo horizontal"
                            style="margin-top:16px; padding-bottom: 30px; border-bottom: #C9CDD4 dashed 1px;">
                            <div class="number" style="height:65px;">
                                <h6>计划完成率</h6>
                                <span style="top:0px;">-<b>%</b></span>
                            </div>
                            <div class="chart" style="height:65px;">
                                <div class="desc">
                                    <div class="title">
                                        <span class="cashname">完成</span>
                                        <span class="cash">-</span>
                                    </div>
                                    <div class="total">
                                        <span class="cashname">总数</span>
                                        <span class="cash">-</span>
                                    </div>
                                </div>
                                <div class="process">
                                    <div class="process-data"></div>
                                    <span class="process-flag"></span>
                                </div>
                            </div>
                        </div>

                        <div id="zong">纵向</div>
                        <div class="costinfo vertical" style="margin-top:16px; padding-bottom: 30px; border-bottom: #C9CDD4 dashed 1px;">>
                            <div class="number" style="height:65px;">
                                <h6>计划完成率</h6>
                                <span style="top:0px;">-<b>%</b></span>
                            </div>
                            <div class="chart" style="height:65px;">
                                <div class="desc">
                                    <div class="title">
                                        <span class="cashname">完成</span>
                                        <span class="cash">-</span>
                                    </div>
                                    <div class="total">
                                        <span class="cashname">总数</span>
                                        <span class="cash">-</span>
                                    </div>
                                </div>
                                <div class="process">
                                    <div class="process-data"></div>
                                    <span class="process-flag"></span>
                                </div>
                            </div>
                        </div>
						<div id="yuyan">预研</div>
						<div class="costinfo pre-research" style="margin-top:16px;">
						    <div class="number" style="height:65px;">
						        <h6>计划完成率</h6>
						        <span style="top:0px;">-<b>%</b></span>
						    </div>
						    <div class="chart" style="height:65px;">
						        <div class="desc">
						            <div class="title">
						                <span class="cashname">完成</span>
						                <span class="cash">-</span>
						            </div>
						            <div class="total">
						                <span class="cashname">总数</span>
						                <span class="cash">-</span>
						            </div>
						        </div>
						        <div class="process">
						            <div class="process-data"></div>
						            <span class="process-flag"></span>
						        </div>
						    </div>
						</div>
                    </div>
                    <div style="height:453px;" class="box mt16 deptyear">
                        <h3>本年累计执行率对比</h3>
                        <div style="height:380px;" id="chartPlanCost">

                        </div>
                    </div>`)
			setPanelData(chartData[0].data[0]);
			getMonTotalBudget(chartData[1].data);
			getBusinessRate(chartData[2].data);
		}



	});
}

//设置看板数据
function setZhichuPanelData(data) {
	var ohtml = `<div class="expenseInfo">
									<div class="total">
										<p>预算总额</p>
										<h3>${FormatCash(data.key04)}<span>万元</span></h3>
									</div>
									<div class="details">
										<div class="">
											<p>执行金额</p>
											<h5>${FormatCash(data.key02)}<span>万元</span></h5>
										</div>
										<div class="">
											<p>剩余金额</p>
											<h5>${FormatCash(data.key03)}<span>万元</span></h5>
										</div>
										<div class="rate">
											<div class="chart">
												<div class="">
													<svg>
														<circle cx="38" cy="38" r="35" stroke="rgba(255, 255, 255, 0.6)"
															stroke-width="2" fill="rgba(255, 255, 255, 0.2)"
															stroke-linecap="round" />
													
														<circle cx="38" cy="38" r="35" stroke="#FFFFFF" stroke-width="6"
															fill="none" stroke-dasharray="${Math.PI * 70 * data.key01}" stroke-dashoffset="${Math.PI * 70 * (1 - data.key01)}"
															stroke-linecap="round" />
													</svg>
												</div>
												<img src="assets/images/icon_Execution@2x.png">
											</div>
											<div class="">
												<p>执行率</p>
												<h5>${Percent(data.key01)}%</h5>
											</div>
										</div>
									</div>
								</div>`
	$(".panel-cost .costinfo").eq(0).html(ohtml);
}

function setPanelData(data) {
	// var ohtml = `<div class="number">
	//                   <h6>预算执行率</h6>
	//                   <span>${Percent(data.key01)}<b>%</b></span>
	//               </div>
	//               <div class="chart">
	//                   <div class="desc">
	//                       <div class="title">
	//                       <span class="cashname">执行金额 </span>
	//                                       <span class="cashname" style="padding: 0 10px;">/</span>
	//                                       <span style="padding-right:10px;" class="cashname">剩余金额 </span>
	//                                       <span class="cashname"><span class="cash">${FormatCash(
	//                                         data.key02
	//                                       )}</span></span>
	//                                       <span class="cashname" style="padding: 0 5px;">/</span>
	//                                       <span class="cashname" ><span style="margin-left:5px;" class="cash">${FormatCash(
	//                                         data.key03
	//                                       )}<b style="padding-left:10px;">万元</b></span></span>
	//                       </div>
	//                       <div class="total">
	//                           <span class="cashname">预算总额</span>
	//                           <span class="cash">${FormatCash(data.key04)}</span>
	//                           <span class="unit">万元</span>
	//                       </div>
	//                   </div>
	//                   <div class="process">
	//                       <div class="process-data" style="width:${Percent(
	//                         data.key01
	//                       )}%;"></div>
	//                       <span class="process-flag"></span>
	//                   </div>
	//               </div>`;


	var shtml = `
  <div class="number" style="height:65px;">
                                <h6>计划完成率</h6>
                                <span style="top:0px;">${Percent(
                                  data.key05
                                )}<b>%</b></span>
                            </div>
                            <div class="chart" style="height:65px;">
                                <div class="desc">
                                    <div class="title">
                                        <span class="cashname">完成</span>
                                        <span class="cash">${pricefmt(
                                          data.key06
                                        )}</span>
                                    </div>
                                    <div class="total">
                                        <span class="cashname">总数</span>
                                        <span class="cash">${pricefmt(
                                          data.key07
                                        )}</span>
                                    </div>
                                </div>
                                <div class="process" >
                                    <div class="process-data" style="width: ${Percent(
                                      data.key05
                                    )}%;" ></div>
                                    <span class="process-flag"></span>
                                </div>
                            </div>
  `;

	var vhtml = `
                    <div class="number" style="height:65px;">
                                <h6>计划完成率</h6>
                                <span style="top:0px;">${Percent(
                                  data.key08
                                )}<b>%</b></span>
                            </div>
                            <div class="chart" style="height:65px;">
                                <div class="desc">
                                    <div class="title">
                                        <span class="cashname">完成</span>
                                        <span class="cash">${pricefmt(
                                          data.key09
                                        )}</span>
                                    </div>
                                    <div class="total">
                                        <span class="cashname">总数</span>
                                        <span class="cash">${pricefmt(
                                          data.key10
                                        )}</span>
                                    </div>
                                </div>
                                <div class="process" >
                                    <div class="process-data" style="width: ${Percent(
                                      data.key08
                                    )}%;" ></div>
                                    <span class="process-flag"></span>
                                </div>
                            </div>
                         `;
	var phtml = `
	<div class="number" style="height:65px;">
	    <h6>计划完成率</h6>
	    <span style="top:0px;">${Percent(data.key11)}<b>%</b></span>
	</div>
	<div class="chart" style="height:65px;">
	    <div class="desc">
	        <div class="title">
	            <span class="cashname">完成</span>
	            <span class="cash">${pricefmt(data.key12)}</span>
	        </div>
	        <div class="total">
	            <span class="cashname">总数</span>
	            <span class="cash">${pricefmt(data.key13)}</span>
	        </div>
	    </div>
	    <div class="process">
	        <div class="process-data" style="width: ${Percent(data.key11)}%;"></div>
	        <span class="process-flag"></span>
	    </div>
	</div>
	`

	$(".panel-cost .costinfo").eq(1).html(shtml);
	$(".panel-cost .costinfo").eq(2).html(vhtml);
	$(".panel-cost .costinfo").eq(3).html(phtml);
}

//月度累计支出预算执行
function getMonTotalBudget(data) {
	let xData = [];
	let currYearTotal = [];
	let currYearheng = [];
	let currYearzong = [];
	let currYearyuyan = []
	let legendData = ["全面预算支出", "横向生产计划", "纵向生产计划", '预研生产计划'];

	for (var i = 0; i < data.length; i++) {
		xData.push(data[i].key01);
		currYearTotal.push((data[i].key04 * 100).toFixed(0));
		currYearheng.push((data[i].key02 * 100).toFixed(0));
		currYearzong.push((data[i].key03 * 100).toFixed(0));
		currYearyuyan.push(((data[i].key05) * 100).toFixed(0))
	}

	let Data = [{
			name: "全面预算支出",
			type: "line",
			symbol: "none",
			barWidth: "25",

			itemStyle: {
				color: "#165DFF",
			},
			data: currYearTotal,
			// emphasis: {
			// 	focus: 'series',
			// }
		},
		{
			name: "横向生产计划",
			type: "line",
			symbol: "none",
			barWidth: "25",

			itemStyle: {
				color: "#50CD89",
			},
			data: currYearheng,
			// emphasis: {
			// 	focus: 'series'
			// }
		},
		{
			name: "纵向生产计划",
			type: "line",
			symbol: "none",
			barWidth: "13",

			yAxisIndex: 0,
			itemStyle: {
				color: "#7239EA",
			},
			data: currYearzong,
			// emphasis: {
			// 	focus: 'series'
			// }
		},
		{
			name: "预研生产计划",
			type: "line",
			symbol: "none",
			barWidth: "13",

			yAxisIndex: 0,
			itemStyle: {
				color: "#FFC107",
			},
			data: currYearyuyan,
			// emphasis: {
			// 	focus: 'series'
			// }
		}
	];

	have("chartPlanCost") ? spaY("chartPlanCost", xData, legendData, Data) : "";
}

function getBusinessRate(data) {
	let thisdata = data;
	var realarray = [];
	for (var key in thisdata) {
		var param = {};
		// param.name= key;
		param.value = thisdata[key]["key07"] * 100;
		param.name = thisdata[key]["key02"];

		realarray.push(param);
	}

	var totalnum = 0;
	var strhtml = "";

	for (let i = 0; i < thisdata.length; i++) {
		var singenum = parseInt(thisdata[i]["key04"] / 10000);

		var totalnum = totalnum + singenum;

		var num1 = thisdata[i]["key04"] / 10000;
		var num11 = num1.toFixed(2);
		var num2 = thisdata[i]["key06"] * 100;
		var num22 = num2.toFixed(1);
		var num3 = thisdata[i]["key03"] / 10000;
		var num33 = num3.toFixed(2);
		var num4 = thisdata[i]["key05"] / 10000;
		var num44 = num4.toFixed(2);

		strhtml +=
			"<div class='esun-boxmin'>\
			<div class='boxmincontent'>\
				<div class='contenttop'>\
					<div class='topleft'>" +
			thisdata[i]["key02"] +
			" <a href='#'><img src='./assets/images/finance/icon-arrow@2x.png' style=' width: 25px; height: 25px; '></a></div>\
				</div>\
				<div class='implementmoney'>\
					<ul>\
						<li style='font-size: 16px;\
						font-family: PingFang SC-Regular, PingFang SC;\
						font-weight: 400;\
						color: #4E5969;'>执行金额</li>\
						<li style='font-size: 12px;\
						font-family: PingFang SC-Regular, PingFang SC;\
						font-weight: 400;\
						color: #86909C;line-height: 40px;'><span>" +
			pricefmt(num11) +
			"</span>  万元</li>\
					</ul>\
				</div>\
				<div class='implerate'>\
				   <ul>\
					   <li>执行率 <span>" +
			num22 +
			"%</span></li>\
					   <li>\
						 <div class='ratestrip' style='width:" +
			num22 +
			"%;'></div>\
						 <div class='ratestripunder'></div>\
					   </li>\
				   </ul>\
				</div>\
				<div class='themessage'>\
					<div class='themessagedown'>\
					 <div class='downleft'>预算总额</div>\
					 <div class='downright'><span>" +
			pricefmt(num33) +
			"</span>  万元</div>\
					</div>\
					<div class='themessagedown'>\
					 <div class='downleft'>剩余金额</div>\
					 <div class='downright'><span>" +
			pricefmt(num44) +
			"</span>  万元</div>\
					</div>\
				</div>\
			</div>\
		</div>";
	}

	$(".plancost").html(strhtml);
}


function zoomIn() {
	console.log('放大')
	window.location = 'businessSegment.html'
}